<template>
  <div class="gezhouba-dam">
    <div class="tourism-title">
      <!-- <div class="present-time">
        <div>{{ date }}</div>
        <div class="its-week">
          <span>{{ week }}</span
          >&nbsp;&nbsp;&nbsp;<span>{{ time }}</span>
        </div>
      </div> -->
      <!-- <div class="title-logo"></div> -->
      <div class="control-cockpit">葛洲坝文旅公司资金动态管控</div>
      <div class="choose-ceason">
        <!-- <div
          @click="quarterly('日')"
          :class="[name == '日' ? 'select-identification' : '']"
        >
          日
        </div> -->
        <!-- <div
          @click="quarterly('月')"
          :class="[name == '月' ? 'select-identification' : '']"
        >
          月
        </div>
        <div
          @click="quarterly('季')"
          :class="[name == '季' ? 'select-identification' : '']"
        >
          季
        </div>
        <div
          @click="quarterly('年')"
          :class="[name == '年' ? 'select-identification' : '']"
        >
          年
        </div> -->
      </div>
    </div>
    <div class="main-body">
      <SituationAnalysis :textName="name" />
      <MezzanineFund :textName="name" />
      <CashEntity :textName="name" />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import SituationAnalysis from "./situationAnalysis.vue";
import MezzanineFund from "./mezzaninefund.vue";
import CashEntity from "./cashEntity.vue";
let name = ref("年");
let quarterly = (val) => {
  //年月日季度切换
  name.value = val;
};

onMounted(() => {});
</script>
<style lang="less" scoped>
.gezhouba-dam {
  width: 100vw;
  height: 100vh;
  background: url("../assets/hostgraph.png") center/cover no-repeat;

  .tourism-title {
    width: 100vw;
    height: 9vh;
    background: url(../assets/16.gif) center/cover no-repeat;
    position: relative;

    .present-time {
      width: 11vw;
      height: 5vh;
      position: absolute;
      left: 16vw;
      top: 2vh;
      font-family: Dream Han Sans CN;
      font-weight: normal;
      font-size: 0.95vw;
      color: #ffffff;
      text-shadow: 0px 3px 7px rgba(1, 4, 8, 0.66);
      opacity: 0.97;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .its-week {
        margin-left: 1.8vw;
      }
    }
    .title-logo {
      position: absolute;
      left: 1vw;
      top: 5.5vh;
      z-index: 20;
      width: 6vw;
      height: 4.5vh;
      background: url(../assets/logo.png) no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
    .control-cockpit {
      width: 40.5vw;
      height: 6vh;
      position: absolute;
      left: 30.2vw;
      top: -1vh;
      text-align: center;
      line-height: 8vh;
      font-family: Dream Han Sans CN;
      font-weight: 700;
      font-size: 2.2vw;
      color: #ffffff;
      text-shadow: 0px 3px 7px rgba(1, 4, 8, 0.66);
      opacity: 0.97;
    }

    .choose-ceason {
      width: 10.3vw;
      height: 5vh;
      position: absolute;
      left: 84.5vw;
      top: 3vh;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-family: Dream Han Sans CN;
      font-weight: normal;
      font-size: 1.3vw;
      color: #ffffff;
      text-shadow: 0px 3px 7px rgba(1, 4, 8, 0.66);
      opacity: 0.97;
      margin-top: 0.3vh;
      cursor: pointer;

      .select-identification {
        width: 2.5vw;
        height: 3vh;
        background: #184580ef;
        border-radius: 6px;
        line-height: 3vh;
        text-align: center;
      }
    }
  }
  .main-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
